<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>伪类选择器</title>
		<script type="text/javascript" src="js/jquery-1.12.4.js"></script>
		<style type="text/css">
			div {
				background-color: #f00;
				margin: 5px;
				border: 2px solid;
			}
		</style>
	</head>
	<body>
		<div id="div1">
			0) div-1
			<div class="cls1">1) div-1.1</div>
			<div>2) div-1.2</div>
			<div>
				3) div-1.3
				<div class="cls1">4) div-1.3.1</div>
				<div>5) div-1.3.2</div>
				<div>6) div-1.3.3</div>
			</div>
		</div>

		<div id="div2">
			7) div-2
			<div class="cls1 cls2">8) div-2.1</div>
			<div class="cls1">9) div-2.2</div>
			<div>
				10) div-2.3
				<div class="cls2">11) div-2.3.1</div>
				<div>12) div-2.3.2</div>
				<div>13) div-2.3.3</div>
			</div>
		</div>
		
		<h1>hello1</h1>
		<h2>hello2</h2>
		<h3>hello3</h3>
		<h4>hello4</h4>
		
		<script type="text/javascript">
		
			//伪类选择器
			
			// 1.1 :first --> 所选择的一组元素中的第一个元素
			// $('div:first').css('background-color','#0f0');
			// $('#div2 .cls1:first').css('background-color','#0f0');
			
			// ps --> :first-child 该元素是其父亲的第一个孩子节点 
		// first 和 first-child 的区别 
		// $('div:first-child').css('background-color','#0f0');
		
		//     1.2 :last ---> 所选择的一组元素中的最后一个元素
		// $('div:last').css('background-color','#0f0');
		
		// 2. selector:not(selector2) 所有的匹配selector1 and 不匹配selector2
		// $('div:not(.cls1)').css('background-color','#0f0');
		// $('div.cls1:not(.cls2)').css('background-color','#0f0');


		// 3.1 eq(index) 从零开始,第index个
		// $('div:eq(3)').css('background-color','#0f0');
		
		// 3.2 lt(index) 从0开始,比indx小的
		// $('div:lt(3)').css('background-color','#0f0');
				
		// 3.3 gt(index) 从0开始,比indx大的
		// $('div:gt(7)').css('background-color','#0f0');
		
		// Q: 所有div 大于2,小于5,着色---->连续使用伪类过滤的时候,下标应该不同
		// $('div:gt(2):lt(2)').css('background-color','#0f0');
		
		// 4.1 :even,第偶数个,从零开始
		// $('div:even').css('background-color','#0f0');
		
		// 4.2 :odd,第奇数个,从零开始
		// $('div:odd').css('background-color','#00f');
		
		// Q:如果有四种颜色怎么做
		// $('div:even:even').css('background-color','#f00');
		// $('div:odd:even').css('background-color','#0f0');
		// $('div:even:odd').css('background-color','#00f');
		// $('div:odd:odd').css('background-color','#0ff');
		
		
		// 5. :header
		$(':header').css('color','#0f0');
		</script>
		
	</body>
</html>
